<template>
  <div>
     <h1>管理员登录页面</h1>
     <table class="table table-bordered">
      <tbody>
        <tr>
          <td align="right">账号</td>
          <td> <input type="text" v-model="queryInfo.UserName"></td>
        </tr>
        <tr>
          <td align="right">密码</td>
          <td> <input type="password" v-model="queryInfo.UsrPwd"></td>
        </tr>
        <tr>
          <td align="right"></td>
          <td> <input type="button" value="登录" class="btn btn-success" @click="Fn"></td>
        </tr>
      </tbody>
     </table>
  </div>
</template>

<script setup lang="ts">
//1.安装 npm i axios  2.导入 作用：专门是用来发送网络请求的 相当于Ajax
import {ref,reactive} from 'vue'
import axios from 'axios';
import {useRoute, useRouter} from 'vue-router'
//router 作用:可以实现页面跳转并且传递参数
const router =useRouter();

//数据
let queryInfo=reactive({
  UserName:'',
  UsrPwd:'',
});

//登录
const Fn=()=>{
  //1.非空验证+有效性验证
  if(queryInfo.UserName=='')
{
  alert("账号不能为空");
  return;
}
if(queryInfo.UsrPwd=='')
{
  alert("密码不能为空");
  return;
}
  //2.发送网络请求 使用
  axios({
    url:'/api/Admins/Login', //向后端发送网络请求的地址
    method:'get',
    params:{
      UserNmae:queryInfo.UserName,
      UsetPwd:queryInfo.UsrPwd,
    },
})
 .then(res=>{
  //res:表示请求成功的结果
  console.log(res);
  if(res.data==-1)
  {
    alert('账号不存在');
    return;
  }
  else if(res.data==-2){
    alert('密码错误');
    return;
  }
  //登陆成功 1.存储用户信息 2.跳转到增加会与那页面
  router.push('/memberAdd');
 })
 .catch(err=>{
  //err：表示请求失败的结果
  console.log(err);
 })
}
</script>

<style scoped>

</style>